<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>淘宝</title>
	<style>
	body{
		margin:0;
		padding:0;
	}
		.content{
			width: 992px;
			height:360px;
		/*	background-color: green;*/
			overflow: none;
			position:absolute;
		}
		.left{
			float:left;
			width: 330px;
			height:360px;
			border:0.1px solid gray;
		/*	background-color: red;*/
		}
		.imgleft{
			position: relative;
			top:20px;
			left:102px;
		}
		h1{
			padding:0;
			margin:0;
			font-size: 20px;
			font-weight: 545;
		}
		.middle{
			float:left;
			width: 330px;
			height:360px;
/*			border:0.1px solid gray;*/

	/*		background-color: pink;*/
		}
		.middle1,.middle2,.right1,.right2{
			width: 330px;
			height:180px;
			border:0.1px solid gray;
			border-left: none;
		}
		.middle11{
			margin:0;
			margin-top: 10px;
			padding:0;

		}
		.middle21,.right21{
			position: relative;
			top:-60px;

		}
		.middle11,.right11{
			position: relative;
			top:-80px;
		}

	.imgmiddle1,.imgright1{
			border-bottom: none;
			border-top:none;
		}
		.imgmiddle1,.imgmiddle2,.imgright1,.imgright2{
			display: inline-block;
			position: relative;
			left:60px;
			top:10px;
		}
		.imgmiddle1{
			left:98px;
			top:10px;
		}
		.imgmiddle2{
			top:44px;
			left:58px;
		}
		.imgright1{
			left:64px;
			top:8px;
		}
		.imgright2{
			left:15px;
			top:30px;
		}
		
		.middle11,.middle21,.right11,.right21{
			display: inline-block;
		}
		.right{
			float:left;
			width: 330px;
			height:360px;

		/*	background-color: blue;*/
		}
		.nameh1,.nameh2,.nameh3{
			margin-left:8px;
			letter-spacing: 2px;
		}
		.title{
			margin-top:10px;
		}
		.title1{
			color:blue;
		}
		.title2{
			color:red;
		}
		.title3{
			color:skyblue;
		}
		.title4{
			color:lightgreen;
		}
		.title5{
			color:green;
		}
		.bottom{
			color:gray;
		}
	</style>
</head>
<body>
	<div class="content">
		<div class="left">
			<h1 class="nameh1 title title1">焕新</h1>
			<h1 class="nameh2">品牌精选新品</h1>
			<h1 class="nameh3 bottom">每日精选首发</h1>

			<div class="imgleft"><img src="image/01.jpg"></div>
		</div>
		<div class="middle">

			<div class="middle1">
					<div class="middle11">
						<h1 class="nameh1 title title2">必抢</h1>
						<h1 class="nameh2">牛货集结</h1>
						<h1 class="nameh3 bottom">件件必抢</h1>
					</div>
				<div class="imgmiddle1"><img src="image/02.jpg"></div>
			</div>
			<div class="middle2">
					<div class="middle21">
						<h1 class="nameh1 title title3">酷玩街</h1>
						<h1 class="nameh2">创意神器</h1>
						<h1 class="nameh3 bottom">潮炫智能</h1>
					</div>
				<div class="imgmiddle2"><img src="image/04.jpg"></div>
			</div>
		</div>
		<div class="right">
			<div class="right1">
					<div class="right11">
						<h1 class="nameh1 title title4">手机馆</h1>
						<h1 class="nameh2">新品手机</h1>
						<h1 class="nameh3 bottom">12期免息</h1>
					</div>
				<div class="imgright1"><img src="image/03.jpg"></div>
			</div>
			<div class="right2">
					<div class="right21">
						<h1 class="nameh1 title title5">喵先生</h1>
						<h1 class="nameh2">全球精选生鲜</h1>
						<h1 class="nameh3 bottom">一站式购齐</h1>
					</div>
				<div class="imgright2"><img src="image/05.jpg"></div>
			</div>
		</div>
	</div>
</body>
</html>